<template>
	<div class="newlogin-box">
		<div class="logoBox">
			<div class="logoImg">
				<img :src="data.logo" alt="">
			</div>
			<div class="logoTitle">
				<h5>{{data.name}}</h5>
				<p>{{data.desc}}</p>
			</div>
			<div class="logobut">
				<div class="logobutIt" @click="drawer = true">
					Inscribirse
				</div>
				<div class="logobutItTow" @click="drawerTow = true">
					Iniciar sesión
				</div>
				<p>Idioma</p>
			</div>
		</div>
		<!-- 注册 -->
		<el-drawer v-model="drawer" title="" direction="btt" :size="550">
			<div class="login-box">
				<div class="titledf">Inscribirse</div>
				<div class="titledd">Aumente sus privilegios registrándose para obtener una cuenta!</div>
				<form class="form" v-on:submit.prevent>
					<div class="form-box">
						<!-- <div class="text">Número de teléfono</div> -->
						<div class="flex">
							<div class="area">{{data.quhao}}</div>
							<input type="number" class="login-input" maxlength="11"
								placeholder="Por favor, introduzca el número de teléfono móvil"
								v-model="postdata.mobile" />
						</div>

					</div>
					<div class="form-box">
						<!-- <h4 class="text">Contraseña</h4> -->
						<div class="flex">
							<input type="password" class="login-input" maxlength="64"
								placeholder="Por favor, introduzca la contraseña" autocomplete="on"
								v-model="postdata.password" />
						</div>
					</div>

					<div class="form-box">
						<!-- <h4 class="text">Confirmar contraseña</h4> -->
						<div class="flex">
							<input type="password" class="login-input" maxlength="64"
								placeholder="Por favor, vuelva a introducir su contraseña" autocomplete="on"
								v-model="postdata.confirm" />
						</div>
					</div>
					<div class="form-box">
						<button @click="sub" class="topup">Iniciar sesión</button>
					</div>
				</form>
			</div>
		</el-drawer>
		<!-- 登录 -->
		<el-drawer v-model="drawerTow" title="" direction="btt" :size="350">
			<div class="login-box">
				<div class="titledf">Iniciar sesión</div>
				<div class="titledd">Ingrese su número de teléfono móvil y contraseña de inicio de sesión para completar el inicio de sesión。</div>
				<form class="form" v-on:submit.prevent>
				    <div class="form-box">
				        <!-- <div class="text">Número de teléfono</div> -->
				        <div class="flex">
				            <div class="area">{{data.quhao}}</div>
				            <input type="number" class="login-input" maxlength="8" placeholder="Por favor, introduzca el número de teléfono móvil"
				                v-model="postdataLogin.mobile" />
				        </div>
				    </div>
				    <div class="form-box">
				        <!-- <h4 class="text">Contraseña</h4> -->
				        <div class="flex">
				            <input type="password" class="login-input" id="password" maxlength="64" placeholder="Por favor, introduzca la contraseña"
				                autocomplete="on" v-model="postdataLogin.password" />
				        </div>
				    </div>
				    <div class="form-box">
				        <button @click="login" class="topup">Iniciar sesión</button>
				    </div>
				</form>
			</div>
		</el-drawer>
	</div>
</template>

<script>
	import AJAX from '@/utils/http';
	import { ElMessage } from 'element-plus'
	export default {
		data() {
			return {
				drawer: false,
				drawerTow: false,
				postdata: {
					mobile: '',
					password: '',
					confirm: '',
					invite: localStorage.getItem('invite')
				},
				postdataLogin: {
					mobile: '',
					password: ''
				},
				data:{},
			};
		},
		created() {
			// 获取URL参数中的token
			const token = this.$route.query.token;
			if (token !== undefined && token !== null && token !== '') {
				// 执行你的逻辑，比如存储token到本地存储
				localStorage.setItem('token', token);
				this.$router.push('/');
			}
			this.fetchData();
		},
		methods: {
			// 注册
			sub() {
				fbq('track', 'CompleteRegistration');
				if (this.postdata.mobile == '') {
					// this.$toast('Por favor, introduzca el número de teléfono móvil');
					ElMessage.error('Por favor, introduzca el número de teléfono móvil')
					return;
				} else if (this.postdata.password == '') {
					// this.$toast('Por favor, introduzca la contraseña');
					ElMessage.error('Por favor, introduzca la contraseña')
					return;
				} else if (this.postdata.confirm !== this.postdata.password) {
					// this.$toast('Dos contraseñas inconsistentes');
					ElMessage.error('Dos contraseñas inconsistentes')
					return;
				} else {
					var mobile = (this.postdata.mobile).toString()
					// if(mobile.substring(0,1) != 6 || mobile.length != 8){
					// 	console.log(mobile.substring(0,1))
					// 	console.log(mobile.length)
					// 	ElMessage.error('El formato del número de teléfono móvil es incorrecto')
					// 	return;
					// }
					AJAX.post('/user/register', this.postdata).then(e => {
						// 未登录
						if (!e.code || !e.data.token) {
							ElMessage.error(e.msg)
							return;
						}

						localStorage.setItem('token', e.data.token);
						// this.$alert(e.msg, 'Ok', () => {
						// 	localStorage.removeItem('invite')
						// 	this.$router.replace('/');
						// });
						this.$alert(e.msg, "Ok", {
						     confirmButtonText: "Ok",
						     callback: action => {
						      localStorage.removeItem('invite')
						      this.$router.replace('/');
						     }
						});
					});
				}
			},
			// 登录
			fetchData() {
				AJAX.post('/index/init', {}, {
					showLoading: false
				}).then(e => {
					this.data = e.data;
			
				});
			},
			login() {
				if(this.postdataLogin.mobile == ''){
					// this.$toast('Por favor, introduzca el número de teléfono móvil');
					ElMessage.error('Por favor, introduzca el número de teléfono móvil')
					return;
				}
				else if(this.postdataLogin.password == ''){
					ElMessage.error('Por favor, introduzca la contraseña')
					// this.$toast('Por favor, introduzca la contraseña');
					return;
				}else{
					var mobile = (this.postdataLogin.mobile).toString()
					// if(mobile.substring(0,1) != 6 || mobile.length != 8){
					// 	console.log(mobile.substring(0,1))
					// 	console.log(mobile.length)
					// 	ElMessage.error('El formato del número de teléfono móvil es incorrecto')
					// 	return;
					// }
					AJAX.post('/user/login', this.postdataLogin).then(e => {
						// 未登录
						if (!e.code || !e.data.token) {
							ElMessage.error(e.msg)
							return;
						}
			
						localStorage.setItem('token', e.data.token);
						// this.$alert(e.msg, 'Ok', () => {
						// 	this.$router.replace('/');
						// });
						this.$alert(e.msg, "Ok", {
						     confirmButtonText: "Ok",
						     callback: action => {
						        this.$router.replace('/');
						     }
						});
					});
				}
			}
		}
	}
</script>

<style scoped>
	.login-box {
		justify-content: start;
		padding: 0;
		padding-top: 16px;
	}
	.titledf{
		font-size: 18px;
		color: #000;
	}
.titledd{
		font-size: 14px;
		color: #000;
		margin: 10px 0px;
	}
	.logoBox {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.logoImg img {
		width: 100px;
		height: 100px;
		border-radius: 10px;
	}

	.logoTitle {
		width: 90%;
		margin-bottom: 20px;
	}

	.logoTitle h5 {
		margin-bottom: 10px;
		color: #000;
		font-size: 16px;
	}

	.logoTitle p {
		font-size: 13px;
		color: #aeb1ba;
	}

	.logobut {
		width: 90%;
	}

	.logobutIt {
		width: 100%;
		height: 45px;
		border: 1px solid #000;
		border-radius: 5px;
		text-align: center;
		line-height: 45px;
		font-size: 15px;
		color: #000;
		font-weight: 600;
		margin-bottom: 10px;
	}

	.logobutItTow {
		width: 100%;
		height: 45px;
		border: 1px solid #1766ff;
		background-color: #1766ff;
		color: #fff;
		border-radius: 5px;
		text-align: center;
		line-height: 45px;
		font-size: 15px;
		font-weight: 600;
	}

	.logobut p {
		font-size: 15px;
		text-align: center;
		color: #333;
		margin-top: 20px;
	}

	/deep/.el-drawer__header {
		display: none;
	}

	/deep/.el-drawer {
		border-radius: 15px 15px 0px 0px;
	}
	/deep/.el-drawer__body {
	    overflow: hidden; 
	}
</style>